<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售数据 - 经理仪表盘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            line-height: 1.6;
        }
        
        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-links {
            display: flex;
            gap: 30px;
        }
        
        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.3s;
        }
        
        .nav-links a:hover {
            opacity: 0.8;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .section-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        .stat-icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 16px;
        }
        
        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .card-header {
            background: #f8f9fa;
            border-bottom: 1px solid #e1e1e1;
            padding: 15px 20px;
            border-radius: 15px 15px 0 0;
            font-weight: bold;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            font-weight: 500;
            transition: transform 0.2s;
            margin: 5px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
        }
        
        .btn-outline {
            background: transparent;
            border: 2px solid #667eea;
            color: #667eea;
        }
        
        .btn-outline:hover {
            background: #667eea;
            color: white;
        }
        
        .btn-group {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        
        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #e1e1e1;
        }
        
        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        .table tr:hover {
            background-color: #f8f9fa;
        }
        
        .text-success {
            color: #28a745 !important;
        }
        
        .text-danger {
            color: #dc3545 !important;
        }
        
        .text-warning {
            color: #ffc107 !important;
        }
        
        .text-info {
            color: #17a2b8 !important;
        }
        
        .text-primary {
            color: #667eea !important;
        }
        
        .text-muted {
            color: #6c757d !important;
        }
        
        .text-center {
            text-align: center;
        }
        
        .fw-bold {
            font-weight: bold;
        }
        
        .progress {
            background-color: #e9ecef;
            border-radius: 4px;
            height: 20px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-bar {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            height: 100%;
            transition: width 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }
        
        .badge {
            display: inline-block;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: bold;
            border-radius: 4px;
            color: white;
        }
        
        .bg-warning {
            background-color: #ffc107;
        }
        
        .bg-secondary {
            background-color: #6c757d;
        }
        
        .bg-dark {
            background-color: #343a40;
        }
        
        .d-flex {
            display: flex;
        }
        
        .justify-content-between {
            justify-content: space-between;
        }
        
        .align-items-center {
            align-items: center;
        }
        
        .mb-2 {
            margin-bottom: 0.5rem;
        }
        
        .mb-3 {
            margin-bottom: 1rem;
        }
        
        .mb-4 {
            margin-bottom: 1.5rem;
        }
        
        .ms-2 {
            margin-left: 0.5rem;
        }
        
        .ms-3 {
            margin-left: 1rem;
        }
        
        .me-1 {
            margin-right: 0.25rem;
        }
        
        .me-2 {
            margin-right: 0.5rem;
        }
        
        .me-3 {
            margin-right: 1rem;
        }
        
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        .col-md-3 {
            flex: 0 0 25%;
            padding: 0 10px;
        }
        
        .col-md-4 {
            flex: 0 0 33.333333%;
            padding: 0 10px;
        }
        
        .col-md-8 {
            flex: 0 0 66.666667%;
            padding: 0 10px;
        }
        
        .col-12 {
            flex: 0 0 100%;
            padding: 0 10px;
        }
        
        @media (max-width: 768px) {
            .col-md-3,
            .col-md-4,
            .col-md-8 {
                flex: 0 0 100%;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .row {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="logo">🎬 经理控制台</div>
            <div class="nav-links">
                <a href="/manager/dashboard">控制台</a>
                <a href="/manager/password-management">密码管理</a>
                <a href="/manager/movies">影片管理</a>
                <a href="/manager/screenings">排片管理</a>
                <a href="/manager/sales-data">销售数据</a>
            </div>
            <div class="user-info">
                <span th:text="'经理：' + ${currentUser != null ? currentUser.username : '未登录'}">经理</span>
                <a href="/auth/logout" class="btn btn-sm">退出登录</a>
            </div>
        </nav>
    </header>

    <div class="container">
        <h2 class="section-title">📊 销售数据</h2>

        <!-- 时间段选择 -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="btn-group">
                    <button class="btn btn-outline" onclick="loadSalesData('today')" id="todayBtn">📅 当日</button>
                    <button class="btn btn-outline" onclick="loadSalesData('week')" id="weekBtn">📆 当周</button>
                    <button class="btn btn-outline" onclick="loadSalesData('month')" id="monthBtn">🗓️ 当月</button>
                </div>
                <div class="ms-3 d-inline-block">
                    <small class="text-muted">数据更新时间：<span id="updateTime" th:text="${#temporals.format(#temporals.createNow(), 'yyyy-MM-dd HH:mm:ss')}"></span></small>
                </div>
            </div>
        </div>

        <!-- 统计概览 -->
        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-icon text-primary">🎫</div>
                <div class="stat-number text-primary" id="totalTickets" th:text="${todayData.totalTickets}">0</div>
                <div class="stat-label">总售票数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon text-success">💰</div>
                <div class="stat-number text-success">¥<span id="totalSales" th:text="${todayData.totalSales}">0</span></div>
                <div class="stat-label">总销售额</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon text-warning">↩️</div>
                <div class="stat-number text-warning" id="totalRefunds" th:text="${todayData.totalRefunds}">0</div>
                <div class="stat-label">总退票数</div>
            </div>
            <div class="stat-card">
                <div class="stat-icon text-danger">💸</div>
                <div class="stat-number text-danger">¥<span id="totalRefundAmount" th:text="${todayData.totalRefundAmount}">0</span></div>
                <div class="stat-label">总退款金额</div>
            </div>
        </div>

        <!-- 详细数据 -->
        <div class="row">
            <!-- 场次销售详情 -->
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">📋 <span id="detailTitle">今日场次销售详情</span></h5>
                    </div>
                    <div class="card-body">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>影片</th>
                                    <th>场次时间</th>
                                    <th>放映厅</th>
                                    <th>票价</th>
                                    <th>售票数</th>
                                    <th>销售额</th>
                                    <th>退票数</th>
                                    <th>退款额</th>
                                </tr>
                            </thead>
                            <tbody id="screeningDetails">
                                <tr th:each="detail : ${todayData.screeningDetails}">
                                    <td th:text="${detail.movieTitle}"></td>
                                    <td th:text="${#temporals.format(detail.screeningTime, 'MM-dd HH:mm')}"></td>
                                    <td th:text="${detail.roomName}"></td>
                                    <td>¥<span th:text="${detail.price}"></span></td>
                                    <td th:text="${detail.ticketsSold}"></td>
                                    <td class="text-success fw-bold">¥<span th:text="${detail.sales}"></span></td>
                                    <td th:text="${detail.refunds}"></td>
                                    <td class="text-danger">¥<span th:text="${detail.refundAmount}"></span></td>
                                </tr>
                                <tr th:if="${#lists.isEmpty(todayData.screeningDetails)}">
                                    <td colspan="8" class="text-center text-muted">📄 暂无数据</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 统计图表和汇总 -->
            <div class="col-md-4">
                <!-- 净收入 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">🧮 净收入统计</h6>
                    </div>
                    <div class="card-body text-center">
                        <h3 class="text-info">¥<span id="netIncome" th:text="${todayData.totalSales - todayData.totalRefundAmount}">0</span></h3>
                        <p class="text-muted mb-0">销售额 - 退款额</p>
                    </div>
                </div>

                <!-- 销售率 -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">📊 销售统计</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>售票率</span>
                                <span id="ticketRate" th:text="${todayData.ticketRate} + '%'">0%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-success" 
                                     th:style="|width: ${todayData.ticketRate}%|" 
                                     id="ticketRateBar"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="d-flex justify-content-between">
                                <span>退票率</span>
                                <span id="refundRate" th:text="${todayData.refundRate} + '%'">0%</span>
                            </div>
                            <div class="progress">
                                <div class="progress-bar bg-warning" 
                                     th:style="|width: ${todayData.refundRate}%|" 
                                     id="refundRateBar"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 热门影片 -->
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">🔥 热门影片</h6>
                    </div>
                    <div class="card-body" id="popularMovies">
                        <div th:each="movie, iterStat : ${todayData.popularMovies}" class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <span class="badge" th:classappend="${iterStat.index == 0 ? 'bg-warning' : (iterStat.index == 1 ? 'bg-secondary' : 'bg-dark')}" 
                                      th:text="${iterStat.index + 1}"></span>
                                <span th:text="${movie.title}" class="ms-2"></span>
                            </div>
                            <span class="text-success fw-bold" th:text="${movie.ticketsSold} + '票'"></span>
                        </div>
                        <div th:if="${#lists.isEmpty(todayData.popularMovies)}" class="text-center text-muted">
                            📄 暂无数据
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function loadSalesData(period) {
            // 更新按钮状态
            document.querySelectorAll('.btn-group .btn').forEach(btn => {
                btn.classList.remove('btn');
                btn.classList.add('btn-outline');
            });
            document.getElementById(period + 'Btn').classList.remove('btn-outline');
            document.getElementById(period + 'Btn').classList.add('btn');
            
            // 显示加载状态
            const loadingHtml = '<tr><td colspan="8" class="text-center">⏳ 加载中...</td></tr>';
            document.getElementById('screeningDetails').innerHTML = loadingHtml;
            
            // 更新标题
            const titles = {
                'today': '今日场次销售详情',
                'week': '本周场次销售详情',
                'month': '本月场次销售详情'
            };
            document.getElementById('detailTitle').textContent = titles[period];
            
            // 发送AJAX请求
            fetch('/manager/sales-data/api?period=' + period)
                .then(response => response.json())
                .then(data => {
                    updateSalesDisplay(data);
                    updateTime();
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('screeningDetails').innerHTML = 
                        '<tr><td colspan="8" class="text-center text-danger">❌ 加载失败</td></tr>';
                });
        }
        
        function updateSalesDisplay(data) {
            // 更新统计数据
            document.getElementById('totalTickets').textContent = data.totalTickets;
            document.getElementById('totalSales').textContent = data.totalSales;
            document.getElementById('totalRefunds').textContent = data.totalRefunds;
            document.getElementById('totalRefundAmount').textContent = data.totalRefundAmount;
            document.getElementById('netIncome').textContent = data.totalSales - data.totalRefundAmount;
            
            // 更新进度条
            document.getElementById('ticketRate').textContent = data.ticketRate + '%';
            document.getElementById('ticketRateBar').style.width = data.ticketRate + '%';
            document.getElementById('refundRate').textContent = data.refundRate + '%';
            document.getElementById('refundRateBar').style.width = data.refundRate + '%';
            
            // 更新场次详情表格
            let detailsHtml = '';
            if (data.screeningDetails && data.screeningDetails.length > 0) {
                data.screeningDetails.forEach(detail => {
                    detailsHtml += `
                        <tr>
                            <td>${detail.movieTitle}</td>
                            <td>${detail.screeningTime}</td>
                            <td>${detail.roomName}</td>
                            <td>¥${detail.price}</td>
                            <td>${detail.ticketsSold}</td>
                            <td class="text-success fw-bold">¥${detail.sales}</td>
                            <td>${detail.refunds}</td>
                            <td class="text-danger">¥${detail.refundAmount}</td>
                        </tr>
                    `;
                });
            } else {
                detailsHtml = '<tr><td colspan="8" class="text-center text-muted">📄 暂无数据</td></tr>';
            }
            document.getElementById('screeningDetails').innerHTML = detailsHtml;
            
            // 更新热门影片
            let popularHtml = '';
            if (data.popularMovies && data.popularMovies.length > 0) {
                data.popularMovies.forEach((movie, index) => {
                    const badgeClass = index === 0 ? 'bg-warning' : (index === 1 ? 'bg-secondary' : 'bg-dark');
                    popularHtml += `
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div>
                                <span class="badge ${badgeClass}">${index + 1}</span>
                                <span class="ms-2">${movie.title}</span>
                            </div>
                            <span class="text-success fw-bold">${movie.ticketsSold}票</span>
                        </div>
                    `;
                });
            } else {
                popularHtml = '<div class="text-center text-muted">📄 暂无数据</div>';
            }
            document.getElementById('popularMovies').innerHTML = popularHtml;
        }
        
        function updateTime() {
            const now = new Date();
            const timeString = now.getFullYear() + '-' + 
                              String(now.getMonth() + 1).padStart(2, '0') + '-' + 
                              String(now.getDate()).padStart(2, '0') + ' ' + 
                              String(now.getHours()).padStart(2, '0') + ':' + 
                              String(now.getMinutes()).padStart(2, '0') + ':' + 
                              String(now.getSeconds()).padStart(2, '0');
            document.getElementById('updateTime').textContent = timeString;
        }
        
        // 页面加载完成后默认加载今日数据
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认按钮状态
            document.getElementById('todayBtn').classList.remove('btn-outline');
            document.getElementById('todayBtn').classList.add('btn');
            
            // 如果页面已有数据，则不需要重新加载
            if (document.getElementById('screeningDetails').children.length === 0) {
                loadSalesData('today');
            }
        });
    </script>
</body>
</html>